import Mock from 'mockjs'

export const NODE_DATA = Mock.mock({
  'nodes|3-7': [{
    'id|+1': 1,
    // "nodeName": '@province',
    'nodeName|+1': ['用户信息维度表', 'XXX维度表1', 'XXX维度表2', 'XXX维度表3', 'XXX维度表4', 'XXX维度表5', 'XXX维度表6']
  }]
})

// export const NODE_DATA = {
//     nodes: [
//         {
//             id: 'node1', // String, 可选，节点的唯一标识。
//             nodeName: '节点1',
//             x: 0, // Number，必选，节点位置的X值
//             y: 0, // Number，必选，节点位置的Y值
//             // 子节点
//             // ports: [
//             //     {
//             //         id: 'port-1',
//             //         name: 'portparams1',
//             //     }, {
//             //         id: 'port-2',
//             //         name: 'portparams2'
//             //     }
//             // ],
//         }, {
//             id: 'node2', // String，可选，节点的唯一标识。。...
//             nodeName: '节点2',
//             x: 300,       // Number，必选，节点位置的 x 值
//             y: 0,       // Number，必选，节点位置的 y 值。

//         },
//         {
//             id: 'node3', // String，可选，节点的唯一标识。。...
//             nodeName: '节点3',
//             x: 300,       // Number，必选，节点位置的 x 值
//             y: 50,       // Number，必选，节点位置的 y 值。
//         },
//     ],
//     // 连接线
//     edge: [{
//         source: 'node1', // 节点id 设置边的起点
//         target: 'node2', // 节点id 设置边的终点
//         //  自定义箭头
//         attrs: {
//             line: {
//                 stroke: "#D3D5D6", // 连接线颜色
//                 targetMarker: null, // 终止箭头
//             },
//         }
//     }]
// }

export const formatEdges = ({ arr, index }) => {
  const obj = {
    source: arr[0].id, // 设置边的起点
    target: arr[index + 1]?.id, // 设置边的终点
    //  自定义箭头
    attrs: {
      line: {
        stroke: '#D3D5D6', // 连接线颜色
        targetMarker: null // 终止箭头
      }
    }
  }
  return obj
}
// const nodeAttr = {
//   width: 300, // 容器宽度
//   height: 40, // 容器高度
//   marginRight: 50, // 右边距
//   marginTop: 15 // 顶部距离
// }

// export function formatData({ item, index, node }) {
//   const { width, height, marginRight, marginTop } = nodeAttr
//   // let y = 0
//   // const x = index === 0 ? 0 : width + marginRight // 第一个块left
//   // 计算每个块的y轴位置
//   // if (index === 0) {
//   //   y = (node.length - 2) * (height + marginTop) / 2 // 第一个块（总块数减掉 - 自身块数1 + 自身高度1）
//   // } else {
//   //   y = (index - 1) * (height + marginTop) // 其它子块
//   // }
//   return {
//     id: item.id,
//     shape: 'node-item', // 自义定容器名称
//     // x, // 节点x轴位置
//     // y, // 节点y轴位置
//     width, // 节点宽度
//     height, // 节点高度
//     data: item// 用来自定义节点展示节点信息，及节点连接桩信息
//   }
// }

export const COMMON_GROUP_OPTION = {
  port: {
    markup: [
      {
        tagName: 'rect', // 矩形
        selector: 'portBody'
      }
    ],
    position: {
      name: 'absolute',
      args: { x: 0, y: 0 }// 相对节点绝对定位，在formatData有重置位置
    },
    attrs: { // 样式
      portBody: {
        width: 6,
        height: 6,
        strokeWidth: 2,
        stroke: '#6A93FF',
        fill: '#fff',
        magnet: true
      }
    },
    zIndex: 3
  }
}

// 画布配置
export const GRAPH_CONFIG = {
  autoResize: true,
  panning: {
    enabled: true,
    // 没有导出类型 EventType
    eventTypes: ['leftMouseDown']
    // rightMouseDown
  },
  highlighting: {
    // 高亮
    magnetAvailable: {
      name: 'stroke',
      args: {
        attrs: {
          portBody: {
            stroke: '#ccc'
          }
        }
      }
    },
    magnetAdsorbed: {
      // port自动吸附，跟snap一起用
      name: 'stroke',
      args: {
        attrs: {
          stroke: '#31d0c6'
        }
      }
    }
  }
}
// 连线配置
export const CONNECTING_CONFIG = {
  snap: {
    radius: 30
  },
  allowBlank: false,
  allowLoop: false,
  allowNode: false,
  allowEdge: false,
  allowMulti: true,
  highlight: true,
  anchor: 'orth',
  connector: 'rounded',
  connectionPoint: 'boundary',
  router: {
    name: 'er',
    args: {
      offset: 40,
      direction: 'H'
    }
  }
}
